<script lang="ts" setup>
    import { ref, reactive, PropType, watch, onMounted } from 'vue';
    import FilterDrawer from './components/filterDrawer/index.vue'
    import MetricsDetailGraph from './metricsDetailGraph/index'
    import { useRouter, useRoute} from 'vue-router';
    import API from '@/services';
    import { Message } from '@arco-design/web-vue';
    import { useStore } from '@/store';
    import resetGraphIcon from '@/assets/images/reset_graph_icon.svg';
    import Bus from '@/utils/emmit'
    import _ from 'lodash'
    import {getYearWeek, getQuerterFormatter,getDateOfWeek, showQuerterFormatter} from '@/utils/util';
    
    const store = useStore();
    const route = useRoute();
    let id = ref(route.query.id);
    const metricsTreeData = ref<any>()
    const filterRef = ref<any>(null);
    const jsonParseData = ref<any>()
    const detailMetricsData = ref<any>()

    const getIndexTreeCard = ref<any>()

    const filterTitleLi = ref<any>()
    const metricsTreeId = ref<any>()
    const getFilterTreeData = ref<any>()
    const timer = ref<any>()
    const initCardData:any=ref()
    const gloubFilter = () => {
        filterRef.value.visibleFilter()
    }
    const emit = defineEmits(['repalceAllNode'])
    // 全局过滤
    const gloupFilterSure = (data:any) => {
        filterTitleLi.value = _.cloneDeep(data)
        const {dateTime, timeUnit, conditions} = data

        let cloneTimeUnit = ''
        const timeType = detailMetricsData.value.dateCondition
        if (dateTime) {
            cloneTimeUnit = _.cloneDeep(dateTime)
            
            if (timeType.timeUnit === 'WEEK') {
                cloneTimeUnit = getYearWeek(new Date(cloneTimeUnit))
                filterTitleLi.value.dateTime = cloneTimeUnit + '周'
            }
            else if (timeType.timeUnit === 'QUARTER') {
                cloneTimeUnit = getQuerterFormatter(new Date(cloneTimeUnit))
                filterTitleLi.value.dateTime = cloneTimeUnit
            }
            else {
                filterTitleLi.value.dateTime = data.dateTime.replaceAll('-', '/')
            }
            
        }
        const conditionArr = conditions?.map((item:any) => {
            delete item.selectLabel
            return {
                ...item
            }
        })
         const params = {
            boardId: id.value, 
            dateTime: cloneTimeUnit || dateTime,
            timeUnit,
            conditions: conditionArr
         }
         detailTreeData(params)
    }
     const detailTreeData = async (params:any) => {
        try {
            const {code, data, msg} = await API.metricsTree.postQuery({
                ...params
            })
            if (code === 200) {
                jsonParseData.value = data
                detailMetricsData.value = JSON.parse(jsonParseData.value.graph)
                initCardData.value = jsonParseData.value.cards
                timer.value = new Date().getTime()
                
                 console.log('脑图数据', detailMetricsData.value)
                if (Object.keys(params).length > 1) {
                    getIndexTreeCard.value = jsonParseData.value.cards
                    getIndexTreeCard.value._timer = timer.value 
                    Message.success('全局筛选成功')
                } else {
                    getFilterTreeData.value = jsonParseData.value.cards
                    getFilterTreeData.value._timer = timer.value
                }
                metricsTreeId.value = jsonParseData.value.id
                
            } else {
                Message.error(msg)
            }
        } catch (error) {
            
        }
    }
    const onDetailRestEvent = () => {
        Bus.emit('onDetailRestEvent')
    }
    onMounted(() => {
        detailTreeData({boardId: id.value})
    })
</script>

<template>

    <div class="metrics-tree-detail">
        <div class="metrics-tree-detail_top">
            <div class="detail-top">
                <a-button type="text" @click="gloubFilter">全局筛选</a-button>
                <ul class="detail-top-content">
                    <li v-if="filterTitleLi?.dateTime">
                        <span>日期：</span>
                        <span>{{filterTitleLi.dateTime}}</span>
                    </li>

                    <li v-for="item in filterTitleLi?.conditions">
                        <span>{{item.dimName}}：</span>
                        <span>{{item?.selectLabel.join('、')}}</span>
                    </li>
                </ul>
            </div>
        </div>

        
        <div class="metrics-tree-detail_content" >
           
                <div
                class="graphResetIcon"
                @click="onDetailRestEvent"
            >
            <a-tooltip content="复位">
                <img :src="resetGraphIcon" />
            </a-tooltip>
            </div>
            
            
            <MetricsDetailGraph  
                :treedata="detailMetricsData"
                :initCardData="initCardData"
                :getIndexTreeCard="getIndexTreeCard" 
                :singleFilterTreeData="getFilterTreeData"
            />
        </div>
    </div>
    <FilterDrawer 
        ref="filterRef" 
        @gloupFilterSure="gloupFilterSure" 
        :getIndexTreeCard="getFilterTreeData"
        :metricsTreeId = 'metricsTreeId'
    />
    
</template>
<style>
.metrics-tree-detail_content .x6-graph.x6-graph-pannable {
    width: 100% !important;
    height: 100% !important;
}
</style>
<style lang="scss" scoped>
    @import './index.scss'
</style>